/**
 * @file Teachers.vue
 * @description 教师管理主页面组件
 * @created 2024-01-27
 */

<template>
  <div class="teachers-container">
    <div class="header">
      <h1>教师管理</h1>
      <button class="add-btn" @click="showAddTeacherDialog">+ 添加教师</button>
    </div>

    <!-- 遍历所有学院 -->
    <div v-for="college in collegesData" :key="college.id" class="college-section">
      <div class="college-header">
        <h2>{{ college.name }}</h2>
        <span class="teacher-count">教师数: {{ getTotalTeachers(college) }}</span>
      </div>
      
      <!-- 遍历学院下的系部 -->
      <div v-for="department in college.departments" 
           :key="department.name" 
           class="department-section">
        <h3>{{ department.name }}</h3>
        <div class="teacher-grid">
          <!-- 遍历系部下的教师 -->
          <div v-for="teacher in department.teachers" 
               :key="teacher.id" 
               class="teacher-card"
               @click="goToTeacherDetail(teacher.id)">
            <div class="teacher-avatar">👨‍🏫</div>
            <div class="teacher-info">
              <h4>{{ teacher.name }}</h4>
              <p>{{ teacher.title }}</p>
            </div>
            <div class="teacher-stats">
              <div class="stat">
                <span>课程数</span>
                <span>{{ teacher.courseCount }}</span>
              </div>
              <div class="stat">
                <span>班级数</span>
                <span>{{ teacher.classCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 计算学院总教师数
const getTotalTeachers = (college) => {
  return college.departments.reduce((total, dept) => total + dept.teachers.length, 0)
}

// 跳转到教师详情页
const goToTeacherDetail = (teacherId) => {
  router.push(`/admin/teacher/${teacherId}`)
}

// 显示添加教师对话框
const showAddTeacherDialog = () => {
  // TODO: 实现添加教师功能
  console.log('显示添加教师对话框')
}

// 学院和教师数据
const collegesData = ref([
  {
    id: 1,
    name: '计算机科学与技术学院',
    departments: [
      {
        name: '软件工程系',
        teachers: [
          { id: 1, name: '张三', title: '教授', courseCount: 3, classCount: 5 },
          { id: 2, name: '李四', title: '副教授', courseCount: 2, classCount: 3 },
          { id: 3, name: '王五', title: '讲师', courseCount: 2, classCount: 2 }
        ]
      },
      {
        name: '计算机科学系',
        teachers: [
          { id: 4, name: '赵六', title: '教授', courseCount: 3, classCount: 4 },
          { id: 5, name: '钱七', title: '副教授', courseCount: 2, classCount: 3 }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '工学院',
    departments: [
      {
        name: '机械工程系',
        teachers: [
          { id: 6, name: '孙八', title: '教授', courseCount: 3, classCount: 4 },
          { id: 7, name: '周九', title: '副教授', courseCount: 2, classCount: 3 }
        ]
      }
    ]
  }
])
</script>

<style scoped>
.teachers-container {
  padding: 30px;
  background: #f5f6fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #1a1a1a;
}

.add-btn {
  padding: 10px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.add-btn:hover {
  background: #40a9ff;
}

.college-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.college-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.college-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1a1a1a;
}

.teacher-count {
  color: #666;
  font-size: 14px;
}

.department-section {
  margin-bottom: 30px;
}

.department-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid #1890ff;
  color: #1a1a1a;
}

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.teacher-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.teacher-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.teacher-avatar {
  font-size: 24px;
  margin-bottom: 12px;
  text-align: center;
}

.teacher-info {
  text-align: center;
  margin-bottom: 15px;
}

.teacher-info h4 {
  margin: 0;
  font-size: 16px;
  color: #1a1a1a;
}

.teacher-info p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}

.teacher-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.stat {
  text-align: center;
}

.stat span:first-child {
  display: block;
  font-size: 12px;
  color: #666;
}

.stat span:last-child {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  margin-top: 4px;
}
</style> 